<template>
  <Menu class="lgSider bgSider" :active-name="activeName">
    <MenuGroup title="品牌教育">
      <MenuItem name="/specialty/fairyTale" to="/specialty/fairyTale">
        <span>乐维童画</span>
      </MenuItem>
      <MenuItem name="/specialty/eloquence" to="/specialty/eloquence">
        <span>领秀口才</span>
      </MenuItem>
      <MenuItem name="/specialty/science" to="/specialty/science" style="">
        <span>领越科教</span>
      </MenuItem>
      <MenuItem name="/specialty/calligraphy" to="/specialty/calligraphy">
        <span>卓艺书画</span>
      </MenuItem>
      <MenuItem name="1-4" to="/specialty/fairyTale">
        <span>紫竹瑜伽</span>
      </MenuItem>
      <MenuItem name="/specialty/ceramic" to="/specialty/ceramic">
        <span>陶工坊</span>
      </MenuItem>
      <MenuItem name="/specialty/taekwondo" to="/specialty/taekwondo">
        <span>至正弘仁跆拳道</span>
      </MenuItem>
      <MenuItem name="/specialty/piano" to="/specialty/piano">
        <span>唯乐钢琴</span>
      </MenuItem>
      <MenuItem name="/specialty/dancingSchool" to="/specialty/dancingSchool">
        <span>华艺中国舞</span>
      </MenuItem>
      <MenuItem name="/specialty/latinDance" to="/specialty/latinDance">
        <span>新秀拉丁舞</span>
      </MenuItem>
      <MenuItem name="/specialty/streetDance" to="/specialty/streetDance">
        <span>
          N
          <sup>+</sup>街舞
        </span>
      </MenuItem>
      <MenuItem name="/specialty/supermode" to="/specialty/supermode">
        <span>凡盛超模星学院</span>
      </MenuItem>
      <MenuItem name="/specialty/music" to="/specialty/music">
        <span>格莱美音乐</span>
      </MenuItem>
      <MenuItem name="/specialty/sports" to="/specialty/sports">
        <span>乐体体育</span>
      </MenuItem>
    </MenuGroup>
  </Menu>
</template>

<script>
export default {
  data() {
    return {
      activeName: this.$route.path.split("/", 3).join("/")
    };
  }
};
</script>

<style lang="less">
.bgSider {
  position: absolute;
  top: -62px;
  background: url("../assets/images/specialty/menu.png") no-repeat;
  background-size: 100% 100%;
  width: 330px;
  height: 955px;
  .ivu-menu-item,
  .ivu-menu-item-group-title {
    padding-right: 50px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    margin: 7px 0;
  }
  .ivu-menu-item {
    text-align: left;
  }
  .ivu-menu-item-active,
  .ivu-menu-item:hover,
  .ivu-menu-submenu-active,
  .ivu-menu-submenu:hover {
    color: #e40082 !important;
  }
  .ivu-menu-item-active {
    color: #e40082 !important;
    background: none !important;
    z-index: 2;
  }
}
.ivu-menu-item-active:after {
  background: none !important;
}
</style>